<template>
	<div>
		普通<NumberInput v-model="value1" @change="change1" style="margin:20px;width:80px"/>{{value1}} {{typeof value1}}
		<NumberInput v-model="value1" readonly style="margin:20px;width:80px"/>
		<NumberInput v-model="value1" disable style="margin:20px;width:80px"/>
		<br/>
		<NumberInput value="" placeholder="自动聚焦" auto-focus style="margin:20px;width:150px"/>
		<br/>
		允许空值<NumberInput v-model="value2" allow-empty @change="change2" style="margin:20px;width:80px"/>{{value2}} {{typeof value2}}
		<br/>
		整数<NumberInput v-model="value3" :precision="0" style="margin:20px;width:80px"/>{{value3}} {{typeof value3}}
		<br/>
		范围<NumberInput v-model="value4" :min="10" :max="20" lazy style="margin:20px;width:80px"/>{{value4}} {{typeof value4}}
		<br/>
		步长<NumberInput v-model="value5" :step="10" style="margin:20px;width:80px"/>{{value5}} {{typeof value5}}
		<br/>
		隐藏按钮<NumberInput v-model="value6" hide-button style="margin:20px;width:80px"/>{{value6}} {{typeof value6}}
		<br/>
		格式化<NumberInput v-model="value6" :format="format" hide-button style="margin:20px;width:80px"/>{{value6}} {{typeof value6}}
		<br/>
		监听<NumberInput v-model="value7" @keydown.native.enter="enter" style="margin:20px;width:80px"/>
		<br/>
		无步进控制<NumberInput v-model="value8" :step-control="false" hide-button style="margin:20px;width:80px"/>
		<br/>
		无边框<NumberInput v-model="value8" no-border :step-control="false" hide-button style="margin:20px;width:80px"/>
		<br/>
		无边框<NumberInput v-model="value8" no-border disable :step-control="false" hide-button style="margin:20px;width:80px"/>
	</div>
</template>

<script>
import NumberInput from '@/components/pc/number-input';

export default {
	name:'index',
	components:{
		NumberInput,
	},
	data(){
		return {
			value1:'',
			value2:'',
			value3:55,
			value4:'',
			value5:'',
			value6:'',
			value7:'',
			value8:'',
		};
	},
	created(){
	},
	methods:{
		change1(val){
			console.log('change1',val);
		},
		change2(val){
			console.log('change2',val);
		},
		enter(){
			console.log('enter');
		},
		format(val){
			if(val){
				return val.toFixed(2);
			}
			return val;
		},
	}
};
</script>

<style lang="scss">

</style>
